<template>
  <div class="main">
    <div class="left">
      <div
        :class="['part', 'thumb', showAct === 'goods' ? `sel` : `nosel`]"
        @click="() => go('goods')"
      >
        <img
          :src="
            publicUrl(
              showAct === 'goods'
                ? `/images/goods-white.png`
                : `/images/goods-icon.png`
            )
          "
        />产品
      </div>
      <div
        :class="['part', 'thumb', showAct === 'factory' ? `sel` : `nosel`]"
        @click="() => go(`factory`)"
      >
        <img
          :src="
            publicUrl(
              showAct === 'factory'
                ? `/images/factory-white.png`
                : `/images/factory-icon.png`
            )
          "
        />厂家
      </div>
    </div>
    <div class="right" v-show="goodsData.length > 0 && showAct === 'goods'">
      <router-link
        :to="jumpUrl(item.type)"
        class="part"
        v-for="item in goodsData"
      >
        <Goods :data-source="item" />
      </router-link>

      <div class="part" v-for="item of surplusDiv(goodsData.length, 4)"></div>
    </div>

    <div
      class="right-factory"
      v-show="factoryData.length > 0 && showAct === 'factory'"
    >
      <div class="part" v-for="item in factoryData">
        <Plant :right-logo="false" />
      </div>
    </div>

    <div
      class="right"
      v-show="
        (showAct === 'goods' && goodsData.length === 0) ||
        (showAct === 'factory' && factoryData.length === 0)
      "
    >
      <span class="none"> 暂无足迹记录 </span>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { publicUrl, surplusDiv } from "@/utils/util";
import { ref, computed } from "vue";
import { GoodsData } from "@/components/Goods/interface/index";
import Goods from "@/components/Goods/index.vue";
import Plant from "@/components/Plant/index.vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const goodsData = ref<Array<GoodsData>>([
  {
    img: publicUrl("/images/Special164.jpg"),
    title: "男衬衫长袖固化款定制款款号男衬衫长袖固化款定制款款号",
    price: 59,
    pay_num: 300,
    company_name: "云裁定制服装有限公司",
    city: "广州",
    area: "增城",
    type: "spot",
  },
  {
    img: publicUrl("/images/Special164.jpg"),
    title: "mtm定制",
    price: 59,
    pay_num: 300,
    company_name: "云裁定制服装有限公司",
    city: "广州",
    area: "增城",
    type: "mtm",
  },
  {
    img: publicUrl("/images/fabric.jpg"),
    title: "某面料",
    price: 59,
    pay_num: 300,
    company_name: "云裁定制服装有限公司",
    city: "广州",
    area: "增城",
    type: "fabric",
  },
]);

const routeQuery = computed(
  (): {
    type?: string;
    keyWord?: string;
  } => {
    return route.query;
  }
);

const showAct = computed((): "factory" | "goods" => {
  return routeQuery.value.type && routeQuery.value.type === "factory"
    ? "factory"
    : "goods";
});

const factoryData = ref<Array<any>>([{}, {}]);

const go = (type: "factory" | "goods") => {
  router.push({
    path: route.path,
    query: {
      keyWord: routeQuery.value.keyWord,
      type: type,
    },
  });
};

const jumpUrl = (
  type: "fabric" | "mtm" | "spot",
  id: number | undefined = undefined
): string => {
  switch (type) {
    case "fabric":
      return "/mtm/fabric/index/fabricDetail";
    case "mtm":
      return "/mtm/index/make";
    default:
      return "/mtm/spot/index/spotDetail";
  }
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
